<script setup>
import { reactive, ref, onMounted } from 'vue';
import moment from 'moment';
import MenuForm from './component/Form.vue'
import { ElMessage } from 'element-plus'
import { getMenuList, menuDel } from '@/api';

const queryForm = ref()

const state = reactive({
  queryForm: {
    menuName: '',
    menuState: 1
  },
  isShowForm: false,
  action: '',
  menuItem: {},
  menuList: [],
})

const columns = [
  { prop: 'menuName', label: '菜单名称', width: 200 },
  {
    prop: 'menuType', label: '菜单类型', formatter: (row, column, value) => {
      let map = {
        1: '菜单',
        2: '按钮',
      }
      return map[value]
    }
  },
  { prop: 'menuCode', label: '权限标识', },
  { prop: 'path', label: '路由地址', },
  { prop: 'component', label: '组件路径', },
  {
    prop: 'menuState', label: '菜单状态', formatter: (row, column, value) => {
      let map = {
        1: '正常',
        2: '停用',
      }
      return map[value]
    }
  },
  {
    prop: 'createTime', label: '创建时间', formatter: (row, column, value) => {
      return moment(value).format('YYYY-MM-DD H:mm')
    },
    width: 120
  },
]

onMounted(() => {
  queryMenuList();
})

const queryMenuList = async () => {
  state.menuList = await getMenuList(state.queryForm)
  console.log('getMenuList:', state.menuList);
}

const resetForm = () => {
  queryForm.value.resetFields()
}

const handelQuery = () => {
  queryMenuList()
}

const handelAdd = (type, row) => {
  state.action = 'add'
  if (type === 2) {
    state.menuItem.parentId = [...row.parentId, row._id].filter(item => item);
  } else {
    state.menuItem.parentId = [null];
  }
  state.isShowForm = true;
}

const handelEdit = (row) => {
  state.action = 'edit';
  state.menuItem = row;
  state.isShowForm = true;
}
const handelDel = async (row) => {
  try {
    console.log(row)
    await menuDel(row._id)
    await queryMenuList()
    ElMessage('删除成功')
  } catch (error) {
    console.error(error)
  }
}
const handelCloseDialog = () => {
  state.isShowForm = false
  state.menuItem = {}
  queryMenuList()
}
</script>

<template>
  <div class="user-manger">
    <div class="query-form">

      <el-form ref="queryForm" :inline="true" :model="state.queryForm">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="state.queryForm.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuState">
          <el-select v-model="state.queryForm.menuState">
            <el-option :value="1" label="正常" />
            <el-option :value="2" label="停用" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handelQuery" type="primary">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="base-table">
      <div class="action">
        <el-button @click="handelAdd(1)" type="primary">新增</el-button>
      </div>
      <el-table :data="state.menuList" row-key="_id" :tree-props="{ children: 'children' }" border>
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" :formatter="item.formatter" />
        <el-table-column #default="scope" label="操作" width="200">
          <el-button type="primary" @click="handelAdd(2, scope.row)">新增</el-button>
          <el-button @click="handelEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handelDel(scope.row)">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <MenuForm :isShowForm="state.isShowForm" :action="state.action" :menuItem="state.menuItem"
      @closed="handelCloseDialog" />
  </div>
</template>